<template>
  <div class="w-full px-2 sm:px-0">
    <TabGroup>
      <TabList class="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
        <Tab v-for="tab in props.tabs" as="template" :key="tab.title" v-slot="{ selected }">
          <button :class="[
            'w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700',
            'ring-white ring-opacity-60 ring-offset-2 focus:outline-none focus:ring-2',
            selected
              ? 'bg-white shadow'
              : 'text-blue-100 hover:bg-white/[0.12] hover:text-white',
          ]">
            {{ tab.title }}
          </button>
        </Tab>
      </TabList>

      <TabPanels class="mt-2 max-w-full max-h-152 overflow-y-auto">
        <slot />
      </TabPanels>
    </TabGroup>
  </div>
</template>
  
<script setup>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";

const props = defineProps({
  tabs: {
    type: Array,
    required: true,
  },
});

</script>
  